<template>
  <div class="login_header">
    <AppLogo
      v-motion
      :initial="{ opacity: 0, y: 100 }"
      :enter="{ opacity: 1, y: 0, transition: { delay: 100 } }"
    />
    <h2
      v-motion
      :initial="{ opacity: 0, y: 100 }"
      :enter="{ opacity: 1, y: 0, transition: { delay: 200 } }"
    >
      {{ getFormTitle }}
    </h2>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, unref } from 'vue'
import { AppLogo } from '@/components/Application/index'
import { LoginStateEnum, useLoginState } from '../useLogin'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  name: 'LoginFormTitle',
  components: {
    AppLogo
  },
  setup() {
    const { t } = useI18n()
    const { getLoginState } = useLoginState()

    const getFormTitle = computed(() => {
      const titleObj = {
        [LoginStateEnum.RESET_PASSWORD]: t('login.signInTitle'),
        [LoginStateEnum.LOGIN]: t('login.signInTitle'),
        [LoginStateEnum.REGISTER]: t('register.signUpTitle'),
        [LoginStateEnum.MOBILE]: t('mobileLogin.signInTitle'),
        [LoginStateEnum.QR_CODE]: t('qrCodeLogin.signInTitle')
      }
      return titleObj[unref(getLoginState)]
    })

    return {
      getFormTitle
    }
  }
})
</script>

<style scoped lang="scss">
.login_header {
  margin-bottom: 20px;

  h2 {
    font-size: 24px;
    font-weight: bold;
    margin-top: 30px;
  }
}
</style>
